<template>
  <div class="boxView">
    <div class="topView">
      <div>
        <div>低风险人员</div>
        <div style="font-weight: 400;">{{ nums.low || 0 }}人</div>
      </div>
      <div>
        <div>中风险人员</div>
        <div style="font-weight: 400;">{{ nums.high || 0 }}人</div>
      </div>
      <div>
        <div>高风险人员</div>
        <div style="font-weight: 400;">{{ nums.center }}人</div>
      </div>
    </div>
    <div class="contentView">
      <div v-for="(item,index) in list" :key="index" class="itemView">
        <img :src="item.avatarInfo && item.avatarInfo[0]" class="headImg"></img>
        <div style="flex:1">
          <div style="margin-bottom: 5px;">{{ item.name }}</div>
          <div>{{ item.idno.replace(/^(.{4})(?:\d+)(.{4})$/, "$1**********$2") }}</div>
        </div>
        <div class="statusView">{{ getStr(item.level) }}风险</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getXzrs, getDetail } from '@/api/earlyWarning/fxry'
export default {
  data() {
    return {
      nums: {},
      list: [],
      levelStr: {
        0: '高',
        1: '中',
        2: '低'
      }
    }
  },
  mounted() {
    this.getRs()
    this.getList()
  },
  methods: {
    getList() {
      getDetail().then((response) => {
        this.list = response.data
      })
    },
    getRs() {
      getXzrs().then((response) => {
        this.nums = response.data
      })
    },
    getStr(level) {
      if(!level) return '未知'
      let str = ''
      const array = level.split(',')
      for (let i = 0; i < array.length; i++) {
        str += this.levelStr[array[i]]
      }
      return str
    }
  }
}
</script>
<style scoped>
.boxView {
  /* height: calc(((100vh - 200px) / 2)); */
  height: calc(((100vh - 180px)));
  background: #fff;
  box-sizing: border-box;
  /* margin-bottom: 20px; */
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 6px #ccc;
}
.topView {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid #ccc;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1vw;
}
.topView > div > div {
  margin-bottom: 5px;
}
.footerView {
  border-top: 1px solid #ccc;
  padding: 20px;
  text-align: right;
}
.contentView {
  flex: 1;
  overflow-y: auto;
}
.itemView {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #f7f7f7;
}
.headImg{
   width: 40px;
   height: 40px;
   border-radius: 50%;
   margin-right: 10px;
}
.itemView:last-child {
  border-bottom: none;
}
.statusView{
   background: rgba(248,239,218,0.6);
   color: rgb(235,211,102);
   padding: 4px 8px;
   font-size: 0.4vw;
}
</style>
